<template>
  <el-dialog
    title="设置菜单"
    width="30%"
    :append-to-body="true"
    :visible.sync="showTag"
  >
    <el-tree
      ref="tree"
      :data="menuList"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="keys"
      :props="{ children: 'children', label: 'name' }"
    ></el-tree>
    <div slot="footer">
      <el-button type="primary" size="mini" @click="sub">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import { stateTypes } from "../../../store/admin";
export default {
  name: "RoleSetMenuDialog",
  data() {
    return {
      keys: [],
      showTag: false
    };
  },
  computed: {
    ...mapState("admin", [stateTypes.menuList])
  },
  methods: {
    show(info) {
      this.info = info;
      info && info.menu && (this.keys = info.menu.split(","));
      this.showTag = true;
    },
    hide() {
      this.showTag = false;
    },
    async sub() {
      const menu = this.$refs.tree.getCheckedKeys();
      if (
        await this.$adminService.roleUpdate({
          menu: menu.join(","),
          id: this.info.id
        })
      ) {
        this.hide();
        this.$message.success("设置成功");
        this.$emit("ok");
      }
    }
  }
};
</script>

<style scoped></style>
